<template>
	<div>
		<div class="container">
			<div class="handle-box">
				<span>实验编号：</span>
				<el-input v-model="query.testNo" placeholder="请输入实验编号" class="handle-input mr10"></el-input>
				<span>实验状态：</span>
				<el-select
					style="color: #000; margin-right: 10px;"
					v-model="query.status"
					class="m-2"
					placeholder="请选择"
				>
					<el-option label="进行中" value="进行中" />
					<el-option label="终止" value="终止" />
				</el-select>
				<el-button type="default"  @click="reset">重置</el-button>
				<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
				<!-- <el-button type="primary" :icon="FolderOpened" @click="importData">导入供电公司数据</el-button> -->
				<ImportData
					ref="importRef"
					type="primary"
					@importData="importData"
					authKey="BRIDGE_IMPORTDATA_KEY"
				/>
			</div>
			<el-table :height="tableHeight" :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column
					width="100"
					align="center"
					label="序号"
				>
					<template v-slot="scope">
						{{ indexMethod(scope.$index, query.pageIndex, query.pageSize) }}
					</template>
				</el-table-column>
				<el-table-column prop="testNo" label="实验编号"></el-table-column>
				<el-table-column prop="companyName" label="该试验对应的供电公司名称">
				</el-table-column>
				<el-table-column prop="powerSupply" label="试验对应的供电所名称"></el-table-column>
				<el-table-column prop="status" label="实验的状态" align="center"></el-table-column>
				<el-table-column label="操作" width="300" align="center">
					<template #default="scope">
						<el-button text :icon="View" @click="clickRow(scope.row)">
							查看
						</el-button>
						<el-button v-if="scope.row.status === '进行中'" text :icon="CircleClose" class="red" @click="stopTestFn(scope.row)">
							终止实验
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:total="pageTotal"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { CircleClose, View, Search, Plus, FolderOpened } from '@element-plus/icons-vue';
import { appTestList, stopTest, electricExcel } from '../../../api/index';
import { indexMethod, getViewPortHeight } from '../../../utils/tools';
import { useRouter } from 'vue-router';
import ImportData from "./ImportData.vue"


const tableHeight = getViewPortHeight() - 320

const router = useRouter();

interface TableItem {
	id: number;
	state: string;
	date: string;
	address: string;
	status: string;
}

const query = reactive({
	testNo: '',
	status: '',
	pageIndex: 1,
	pageSize: 10
});
const tableData = ref<TableItem[]>([]);
const pageTotal = ref(0);
// 获取表格数据
const getData = () => {
	appTestList({
		pageNumber: query.pageIndex,
    pageSize: query.pageSize,
    testNo: query.testNo,
		status: query.status,
	}).then((res: any) => {
		tableData.value = res.rows;
		pageTotal.value = res.total || 0;
	});
};
getData();

// 查询操作
const reset = () => {
	query.pageIndex = 1
	query.status = ''
	query.testNo = ''
	getData();
}

const handleSearch = () => {
	query.pageIndex = 1;
	getData();
};
// 分页导航
const handlePageChange = (val: number) => {
	query.pageIndex = val;
	getData();
};

// 删除操作
const handleDelete = (index: number) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	})
		.then(() => {
			ElMessage.success('删除成功');
			tableData.value.splice(index, 1);
		})
		.catch(() => {});
};

const clickRow = (rowData: any) => {
	router.push({
		path: "/business/lineDataManagementDetail",
		query: {
			...rowData
		}
	})
}

const stopTestFn =  (rowData: any) => {
	ElMessageBox.confirm('确定要终止实验吗？', '提示', {
		type: 'warning'
	})
		.then( async () => {
					const res = await stopTest({ id: rowData.id })
			if (res) {
				ElMessage.success("操作成功！")
				getData()
			} else {
				ElMessage.error("终止实验失败！")
			}
	})
	.catch(() => {});
}

const importRef: any = ref(null)
const importData = async (data: any) => {
	const res: any = await electricExcel(data)
  importRef.value?.importReuslt()
  if (res.code === 200) {
    importRef.value?.handleClose()
    ElMessage({
      message: "导入成功",
      type: "success"
    })
  }
}
</script>
<style scoped lang="less">
@import "./index.less";
</style>

